{% extends './common/base.html' %} {% block body %}


<div class="mt10 ml10 fb bl3 f14 pl10 tl pr10">
        <h3>{{project.system_name}}<small class="ml10">基础路径：{{project.system_url}}</small></h3>
</div>
<hr>

<div class="row">
    <div class="alert alert-info ml15" style="width:97%">
        备注：此页面是项目集合页面，系项目名：
        <!-- {{result[0].system_url}} -->
        <span class="alert-link">{{project.system_name}} </span>，对项目进行查看操作，如果接口有变动，请联系相关人员进行相关操作！
    </div>
    <div class=" col-md-3">
        <div class="alert alert-success" style="width:97%">
            <a href="javascript:;" class="alert-link">是否授权</a>
            <div class="mt10">
                <button type="button" class="btn btn-success" @click="autoLoginDialog">请求授权</button>

                <button type="button" class="btn btn-danger" @click="clearAuto">清除授权</button>
            </div>


        </div>
        {% if (result.length)%} {% for item in result %}
        <div class="menu-list">
            <h4>
                <i class="glyphicon glyphicon-bookmark"></i>{{item.group_name}}</h4>
            <ul class="ulmenu1">
                {% for child in item.children %}
                <li>
                    <a class="selected" href="javascript:;" @click="clickMethods('{{child.api_id}}','{{item.group_name}}')">{{child.api_name}}</a>
                </li>
                {% endfor %}

            </ul>
        </div>
        {% endfor %} {% else %}

        <div class="alert alert-info" style="width:100%">
            还没有创建相关接口项目！请联系相关人员进行相关操作
        </div>
        {% endif %}
    </div>

    <div class="content col-md-9">
        <ol class="breadcrumb">
            <li>
                <a href="javascript:;">{{result[0].system_name}}</a>
            </li>
            <li v-if="groupName">
                <a href="">${groupName}</a>
            </li>
            <li v-if="groupName">
                ${api_name}
            </li>
        </ol>

        <!-- {% block showForm%}{% endblock %} -->
        <div class="w h mt10 rel" v-if="isShow">
            <!--接口标题-->

            <div class="alert alert-success" style="width:97%">
                接口名称:
                <span class="fs12 ml10" style="font-weight:300;">${api_name}</span>
            </div>


            <div class="alert alert-info" style="width:97%">
                接口介绍:
                <span class="fs12 ml10" style="font-weight:300;">${api_desc}</span>
            </div>


            <div class="alert alert-warning" style="width:97%">
                参数说明
            </div>
            <table class="table table-bordered table-striped" style="width:97%;">
                <thead>
                    <th>参数名称</th>
                    <th>是否必填</th>
                    <th>参数说明</th>
                </thead>
                <tbody>
                    <template v-for="item of api_params">
                        <tr>
                            <td>${item.param_key}</td>
                            <td>${item.param_null}</td>
                            <td>${item.param_desc}</td>
                        </tr>
                    </template>

                </tbody>
            </table>

            <div class="alert alert-info" style="width:97%">
                调用接口
            </div>
            <!--接口URL-->
            <table class="table table-bordered table-striped" style="width:97%;">
                <tr>
                    <td class="w100 pr10 ">
                        <select class="form-control" id="method" v-model="apiType">
                            <option value="GET">GET</option>
                            <option value="POST">POST</option>
                        </select>
                    </td>
                    <td class="pr10">
                        <div class="input-group">
                            <input type="text" class="form-control" id="url" v-model="api_method" readonly placeholder="Enter request URL">
                            <span class="input-group-addon cursor btn-main" @click="sendAjaxApi">
                                <i class="glyphicon glyphicon-search"></i> Send</span>
                        </div>
                    </td>
                    <td class="w200 pr10 ">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" v-model="checked"> 是否需要JWT加密
                            </label>
                        </div>
                    </td>
                </tr>
            </table>

            <!--参数-->

            <div class="alert alert-info mt10" style="width:97%">
                请求参数
            </div>
            <table class="table table-bordered table-striped" style="width:97%;">
                <thead>
                    <tr class="fb">
                        <td class="p5" style="width:30%">
                            Key
                        </td>
                        <td class="p5" colspan="2">
                            Value
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <!-- ${api_params} -->
                    <template v-if="api_params.lenght" v-for="item of api_params">
                        <tr class="last">
                            <td>
                                <input type="text" class="form-control" v-model="item.param_key" readonly data-stage="key">
                            </td>
                            <td class="pl10">
                                <input type="text" class="form-control" data-stage="value" placeholder="请输入参数值" v-model="item.param_value">
                            </td>
                        </tr>
                    </template>
                    <template>
                        <tr class="last">
                            <td colspan="2" class="tc">
                                无请求参数
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>

            <div class="alert alert-info mt10" style="width:97%">

                <textarea class="form-control mt10" rows="5" id="json-textbox" readonly>${resultJson}</textarea>
            </div>
            <div class="mt10">
                <!-- <textarea  class="form-control"  rows="20" readonly>${resultJson}</textarea> -->

                <div class=" tool-input-div">

                    <p>
                        <a href="javascript:format('#json-textbox', '#json-code-div', '#error-span');" class="btn btn-success">格式化JSON</a>
                    </p>
                </div>
                <div class=" tool-result-div" id="json-code-div">
                </div>
                <div class=" alert alert-danger" id="error-span"></div>
            </div>
            <!--参数：end-->

        </div>
        <template v-else>
            <div class="alert alert-warning mt10" style="width:97%">
                请点击左侧菜单进行相关操作!
            </div>
        </template>
    </div>



    <div class="modal fade" id="myDialog" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">项目操作</h4>
                </div>
                <div class="modal-body">

                    <div class=" flex-between-center">
                        <button type="button" class="btn btn-success btn-sm" @click="addAutoParams">添加参数</button>
                        <button type="button" class="btn btn-danger btn-sm" @click="autoLogin">立即授权</button>
                    </div>
                    <table class="table mt10">

                        <tbody>

                            <tr class="last">
                                <td width="20%">
                                    授权方法
                                </td>
                                <td colspan="2">
                                    <input type="text" class="form-control" v-model="baseUrl" placeholder="接口方法">

                                </td>

                            </tr>
                            <template v-for="(item,index) of autoParamsList">
                                <tr class="last">
                                    <td>
                                        <input type="text" class="form-control" v-model="item.auto_key" placeholder="输入字段名称">
                                    </td>

                                    <td class="pl10">
                                        <input type="text" class="form-control" v-model="item.auto_value" placeholder="输入值">
                                    </td>
                                    <td class="pl10">
                                        <a href="javascript:;">
                                            <i class="glyphicon glyphicon-trash" @click="deleteApiParams(index,item)"></i>
                                        </a>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>


                </div>
                <div class="panel-footer" style="color:red;">

                    ${auto_msg}

                </div>
            </div>
        </div>
    </div>


    {% endblock %} {% block script %}

    <script src="/static/js/formatJson.js"></script>
    <!-- <script src="/static/js/index_show.js"></script> -->
    <script>
        setTimeout(format('#json-textbox', '#json-code-div', '#error-span'), 1000);
        new Vue({
    el: '#container',
    delimiters: ['${', '}'],
    data() {
        return {
            autoParamsList: [{
                auto_key: '',
                auto_value: '',
            }],
            auto_msg: '',
            baseUrl: '',
            account: '',
            password: '',
            checked: true,
            groupName: '',
            isShow: false,
            api_path: '',
            apiType: 'GET',
            api_id: '',
            api_params: '',
            api_name: '',
            api_method: '',
            api_desc: '',
            resultJson: {}
        }
    },
    mounted() {

    },
    methods: {
        // 添加参数
        addAutoParams() {
            this.autoParamsList.push({
                auto_key: '',
                auto_value: '',
            })
        },
        //添加弹框
        autoLoginDialog() {
            this.autoParamsList[{
                auto_key: '',
                auto_value: '',
            }]
            $('#myDialog').modal()
        },
        //删除参数
        deleteApiParams(index, item) {
            console.log(index)
            this.autoParamsList.splice(index, 1)
        },
        // 授权登录
        autoLogin() {
            let mapObj = {};
            for (let item of this.autoParamsList) {
                mapObj[item.auto_key] = item.auto_value;
            }

            let param = JSON.stringify(this.checked ? ({
                encry: JWTSecret.jwt(mapObj)
            }) : mapObj);
            mapObj.path = '{{project.system_url}}' + this.baseUrl;
            mapObj.parmas = param;
            $.ajax({
                url: '/index/sendApiResult',
                type: 'POST',
                data: mapObj,
            }).then((json) => {
                if (json.success) {
                    this.auto_msg = '授权成功';
                } else {
                    this.auto_msg = `授权失败，${json.msg}`;
                }
            }).catch(function (error) {
                console.log(error);
            });
        },

        //清除授权
        clearAuto() {
            $.ajax({
                url: '/index/clear',
                type: 'POST',

            }).then((json) => {
                if (json.success) {
                    console.log('清除成功')
                } else {
                    console.log('清除失败')
                }
            }).catch(function (error) {
                console.log(error);
            });
        },


        clickMethods(id, groupName) {
            this.isShow = true;
            this.resultJson = {};
            $.get(`/index/show?api_id=${id}`).then((json) => {
                let res = json.result;
                if (json.success) {
                    this.api_path = res.api_path;
                    this.api_id = res.api_id;
                    this.api_params = JSON.parse(res.api_params);
                    this.api_name = res.api_name;
                    this.api_method = res.api_method;
                    this.api_desc = res.api_desc;
                    this.groupName = groupName
                }
            }).catch(function (error) {
                console.log(error);
            });
        },
        //请求第三方接口
        sendAjaxApi() {
            let paramsObj = this.formartParams();
            let param = JSON.stringify(this.checked ? ({
                encry: JWTSecret.jwt(paramsObj.parmas)
            }) : paramsObj.parmas);
            paramsObj.path = this.api_path + this.api_method;
            paramsObj.parmas = param;
            //  console.log(paramsObj);
            $.ajax({
                url: '/index/send',
                type: this.apiType,
                //  url: this.api_path + this.api_method,
                data: paramsObj,
            }).then((json) => {
                this.resultJson = json;
            }).catch(function (error) {
                console.log(error);
            });
        },
        formartParams() {
            let mapObj = {};
            for (let item of this.api_params) {
                mapObj[item.param_key] = item.param_value;
            }
            return {
                parmas: mapObj
            }
        },


    }
})
    </script>




    {% endblock %}